<template>
  <div class="answer">
    <p class="answer-real-name">{{answer.realName}}</p>
    <p class="answer-content" v-html="answer.content"></p>
    <p class="answer-operate">
      <el-button type="text" @click="openComment" size="small">评论({{answer.commentNum}})</el-button>
      <el-button type="text" @click="delete_" size="small" v-if="answer.canOperate">删除</el-button>
    </p>
  </div>
</template>

<script>
  export default {
    name: "AnswerItem",
    props: {
      answer: Object,
    },
    methods: {
      openComment() {
        this.$emit("openComment", this.answer.id);
      },
      delete_() {
        this.$confirm(`确定删除吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.answernDelete(this.answer.id).then(res => {
            this.$emit("update");
          })
        })
      }
    }
  }
</script>

<style scoped>
  .answer-real-name {
    font-size: 15pt;
    font-weight: bold;
  }
  .answer-operate {
    text-align: right;
  }
  .answer {
    padding: 5px;
    border-bottom: 1px solid #409EFF;
  }
</style>
